<template>
  <div class="report-form-content">
    <el-scrollbar max-height="500px">
      <el-form class="my-form" label-position="right" label-width="auto" label-suffix="：">
        <el-timeline class="scrollbar-demo-item">
          <el-timeline-item placement="top"
                            v-for="(item, index) in approveOrderOperList"
                            :key="index"
                            :timestamp="item.timestamp||'未开始'"
                            :color="item.color"
                            :hollow="item.hollow">
            <el-card class="update-log" :style="getCardStyle(item)" shadow="hover">
              <el-form-item class="margin-0">
                <text class="mx-1">{{ item.title }}<span v-if="item.isCountersign === '1'">(会签)</span></text>
              </el-form-item>
              <el-form-item class="margin-0" v-if="item.approveOrderOperType !== approveOrderOperTypes().approve">
                <el-form-item label="操作类型">
                  <EnumTag :enum-list="getEnumList('ApproveOrderOperType')" :enum-key="item.approveOrderOperType" />
                </el-form-item>
                <el-form-item label="操作人">
                  <LabelTag :foreignList="userList" :foreign-ids="item['currentApproveUserId']" :foreign-label="'name'" />
                </el-form-item>
              </el-form-item>
              <el-form-item class="margin-0" v-if="item.approveOrderOperType === approveOrderOperTypes().approve">
                <el-form-item label="操作类型">
                  <EnumTag :enum-list="getEnumList('ApproveOrderOperType')" :enum-key="item.approveOrderOperType" />
                </el-form-item>
                <el-form-item label="审批类型">
                  <EnumTag :enum-list="getEnumList('ApproveNodeType')" :enum-key="item.approveNodeType" />
                </el-form-item>
                <el-form-item label="审批部门" v-if="item.approveNodeType === '1'">
                  <LabelTag :foreignList="organizationList" :foreign-ids="item['currentApproveIds']" :foreign-label="'organizationName'" />
                </el-form-item>
                <el-form-item label="审批人" v-else-if="item.approveNodeType === '2'">
                  <LabelTag :foreignList="userList" :foreign-ids="item['currentApproveIds']" :foreign-label="'name'" />
                </el-form-item>
                <el-form-item label="审批角色" v-else-if="item.approveNodeType === '3'">
                  <LabelTag :foreignList="roleList" :foreign-ids="item['currentApproveIds']" :foreign-label="'roleName'" />
                </el-form-item>
              </el-form-item>
              <el-form-item class="margin-0" label="审批结果" v-if="item.approveOrderOperType === approveOrderOperTypes().approve && item.approveResult !== null">
                <EnumTag :enum-list="getEnumList('ApproveResult')" :enum-key="item.approveResult" />
              </el-form-item>
              <el-form-item class="margin-0" label="审批意见" v-if="item.approveOrderOperType === approveOrderOperTypes().approve && item.approveOpinion !== null">{{ item.approveOpinion }}</el-form-item>
              <el-form-item class="margin-0" label="审批签名" v-if="item.approveOrderOperType === approveOrderOperTypes().approve && item.signImg">
                <img :src="item.signImg" alt="" width="100" height="40" />
              </el-form-item>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-form>
    </el-scrollbar>
  </div>
</template>
<script setup>
import {doGet} from "@/config/http"
import {svc, getListPageSize, isNullOrUndefinedOrEmpty, getEnumList, approveOrderOperTypes} from '@/config/common'
import {ref, watch} from "vue"

const props = defineProps({
  businessType: {
    type: String,
    default: null,
  },
  businessId: {
    type: String,
    default: null,
  },
})

const icon = ref('el-icon-check')
const color = ref('')

const userList = ref([])
const organizationList = ref([])
const roleList = ref([])

const approveOrderOperList = ref([])

watch(() => [props.businessType, props.businessId], async vals => {
  approveOrderOperList.value = []
  let bt = vals[0]
  let bi = vals[1]
  if (isNullOrUndefinedOrEmpty(bt) || isNullOrUndefinedOrEmpty(bi)) {
    return;
  }
  let p1 = doGet(svc, '/user/page', {pageSize: getListPageSize()}, true)
  let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
  let p3 = doGet(svc, '/role/page', {pageSize: getListPageSize()}, false)
  let resArray = await Promise.all([p1, p2, p3])
  userList.value = resArray[0]['records']
  organizationList.value = resArray[1]['records']
  roleList.value = resArray[2]['records']
  let param = {
    businessType: bt,
    businessId: bi,
  }
  approveOrderOperList.value = await doGet(svc, '/customApprove/queryApproveOrderOper', param, false)
  approveOrderOperList.value.map(async item => {
    if (item['approveOrderOperType'] === '2' && !isNullOrUndefinedOrEmpty(item['approveResult'])) {
      let r = await doGet(svc, `/custom/getSignImg/${item.currentApproveUserId}`, {}, false)
      if (r) {
        item.signImg = 'data:image/gif;base64,' + r
      }
    }
  })
},{immediate:true})

function getCardStyle(item) {
  if (item.approveOrderOperType === approveOrderOperTypes().approve) {
    return "border:1px solid #888;"
  }
  return "border:1px solid #ccc;"
}
</script>
<style scoped>
.mx-1 {
  font-size: 18px;
  font-weight: bold;
}
.scrollbar-demo-item {
  margin: 0 50px;
  border-radius: 4px;
}
.margin-0 {
  margin: 1px 0;
  border-bottom: 1px dashed #ccc;
}
.margin-0 div {
  margin-right: 20px;
}
</style>
